import React,{useState,useCallback} from 'react';
import styles from "./styles.module.scss";
import {Alert} from "antd";
import {SkinTwoTone,SafetyCertificateTwoTone,LockTwoTone} from "@ant-design/icons";
import axios from "axios";
export default function Login() {
    let [username,setUsername]=useState('')
    let [password,setPassword]=useState('')
    let [errorData,seterrorData]=useState('出错啦')
    let [bool,setBool]=useState(true)
    const changeUsername=useCallback((ev)=>{
        setUsername(ev.target.value)
    },[])
    const changePassword=useCallback((ev)=>{
        setPassword(ev.target.value)
    },[])
    const sending=useCallback(()=>{
        if(!username||!password){
            seterrorData('用户名或密码不为空')
            setBool(false)
            setTimeout(()=>{
                setBool(true)
            },2000)
        }
        axios({
            method:"post",
            url:'/api/user/login',
            data:{
                username,password
            }
            
        }).then((res)=>{
            // console.log(res.data.data.token);
            localStorage.setItem('token',res.data.data.token)
        })

    },[username,password])
    return (
        <div className={styles.login}>
        
            <div className={styles.content}>
                <div className={styles.left}>
                    <img src={require("../../assets/images/loginBanner.png")} />
                </div>
                <div className={styles.right}>
                <Alert message={errorData} type="error" showIcon style={{width:'200px',position:"fixed",top:"150px",left:"600px"}} className={bool?styles.active:''} />
                    <h3>
                        维修调度管理系统
                        <p>WELCOMEE欢迎登录</p>
                    </h3>
                    <ul>
                        <li>
                        <SkinTwoTone twoToneColor="#006BFF" />

                            <input value={username} onChange={changeUsername} type="text" placeholder="请输入用户名" />
                        </li>
                        <li>
                        <LockTwoTone twoToneColor="#006BFF"  />
                            <input value={password} onChange={changePassword} type="password" placeholder="请输入密码"
                             />
                        </li>
                        <li>
                        <SafetyCertificateTwoTone  twoToneColor="#006BFF"/>
                            <input  type="text" placeholder="请输入验证码" />
                            <span className={styles.yz}>264D</span>
                        </li>
                    </ul>
                    <p className={styles.tj} onClick={sending}>立即登录</p>
                    
                </div>
            </div>
        </div>
    )
}
